import Vue from "vue"
import VueRouter from "vue-router"

Vue.use(VueRouter)

const routes = [
  // 首页顶部导航栏
  {
    path: "/",
    // name: 'Tabs',
    component: () => import("@/views/tabs"),
    children: [
      {
        path: "/",
        redirect: "/findmusic",
      },
      {
        // 发现音乐
        path: "/findmusic",
        // name: 'findmusic',
        component: () => import("@/views/findmusic"),
        children: [
          {
            path: "/",
            redirect: "/findmusic/discover",
          },
          {
            // 推荐歌单
            path: "/findmusic/discover",
            name: "discover",
            meta: { title: "推荐歌单" },
            component: () =>
              import("@/views/findmusic/components/discover.vue"),
          },
          {
            // 排行榜
            path: "/findmusic/toplist",
            name: "toplist",
            meta: { title: "排行榜" },
            component: () => import("@/views/findmusic/components/toplist.vue"),
          },
          {
            // 歌单
            path: "/findmusic/playlist",
            name: "playlistAll",
            meta: { title: "歌单" },
            component: () =>
              import("@/views/findmusic/components/playlist.vue"),
          },
          {
            // 歌单详情
            path: "/playlist",
            name: "playlist",
            component: () => import("@/views/playlist"),
            props: (route) => ({ id: route.query.id }),
          },
          {
            // 专辑详情
            path: "/album",
            name: "album",
            component: () => import("@/views/album/album"),
            props: (route) => ({ id: route.query.id }),
          },
          {
            //音乐详情
            path: "/music-playerdetail",
            name: "music-playerdetail",
            component: () => import("@/views/music-playerdetail/music-playerdetail"),
          },
          {
            //搜索音乐节目
            path: "/search-detail",
            name: "search-detail",
            component: () => import("@/views/search/search"),
          },
        ],
      },
     
      {
        // 个人中心
        path: "/userAccount",
        name: "userAccount",
        meta: { title: "用户" },
        component: () => import("@/views/userAccount/userAccount"),
        props: (route) => ({ id: route.query.id }),
      },
      // 歌手信息
      {
        path: "/artistAccount",
        name: "artistAccount",
        meta: { title: "歌手" },
        component: () => import("@/views/artistAccount/artistAccount"),
        props: (route) => ({ id: route.query.id }),
      }

    ],
  },
  // 登录模块
  {
    path: "/login",
    component: () => import("@/views/login"),
    children: [
      {
        path: "/",
        redirect: "/login/qr",
      },
      {
        meta: { title: "登录界面-密码登录" },
        path: "/login/code",
        name: "account-code",
        component: () => import("@/components/login-item/account-code.vue"),
      },
      {
        meta: { title: "登录界面-手机验证码登录" },
        path: "/login/pwd",
        name: "account-pwd",
        component: () => import("@/components/login-item/account-pwd.vue"),
      },
      {
        meta: { title: "登录界面-手机扫码登录" },
        path: "/login/qr",
        name: "qrcode",
        component: () => import("@/components/login-item/qrcode.vue"),
      },
    ],
  },
  // 匹配一切不存在地址
  { path: '*', name:"notFindPage", component: () => import("@/views/NotFound"), meta: { title: 'NotFound' } }//404
]

const router = new VueRouter({
  // mode: 'history',
  // base: process.env.BASE_URL,
  routes,
})
// 解决bug：页面/路由跳转后，滚动条消失，页面无法滚动
router.afterEach((to) => {
  // console.log(to, from)
  // console.log(to.name, from.name === "account-code")
  if (to.name === "account-code") {
    document.querySelector("body").style.backgroundColor = ""
    document.querySelector("body").style.background =
      "url(/img/login-background.10557c94.jpg)"
  }
  else{
    document.querySelector("body").style.backgroundColor = ""
    document.querySelector("body").style.background = "url()"
  }

})
router.afterEach((to) => {
  if (to?.meta?.title) {
    document.title = "音乐播放器 - " + to.meta.title
  } else {
    document.title = "自定义播放器"
  }
})
router.beforeEach((to, from, next)=>{
  if(to.matched.length === 0){//未匹配到的时候跳转到404页面
  next({name:"notFindPage"})
 }else{
  next()//匹配到的时候跳转相应的路由
 }
  })
export default router
